<template>
	<view class="page-index skeleton PF-R uni-white-bg">
		<view class="mp-header ">
			<view class="sys-head" :style="{ height: statusBarHeight }"></view>
			<view class="serch-wrapper disp flex-row centent js-center ">
				<!-- 定位 -->
				<view class="logo disp center basic-label fs32" @click="openLocation">
					<image src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/address.png" mode="aspectFit"
						class="addres_img"></image>
					<view class="uni-ml-4 PF-S">{{cityName}}</view>
					<image src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/icon_down.png"
						mode="aspectFit" class="addres_img uni-ml-4"></image>
				</view>
				<text class="titles PF-S basic-label fs32 uni-ml-10">冬季夏令营</text>
			</view>
		</view>

		<view class="swiper uni-white-bg">
			<swiper :indicator-dots="true" :autoplay="true" :circular="true" :interval="4000" :duration="500"
				indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
				<block v-for="(item,index) in imgUrls" :key="index">
					<swiper-item>
						<view @click="menusTap(item.url)">
							<image :src="item.pic" class="slide-image" lazy-load></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>

		<!-- menu -->
		<view class='nav acea-row'>
			<view class='item' @click="menusTap(item.url)" v-for="(item,index) in menus" :key="index">
				<view class='pictrue'>
					<image :src='item.pic' class="skeleton-radius"></image>
				</view>
				<view class="menu-txt basic-label ">{{item.name}}</view>
			</view>
		</view>

		<image src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/zhuti.png" mode="widthFix"
			class="borders-pad tip_images"></image>

		<view class="float-style  between borders-pad">
			<view class="img_item f_left">
				<image v-for="(item, indexNaN) in pics" :key="indexNaN" lazy-load mode="scaleToFill"
					class="img-waterfall" :src="item.img" :style="'height:' + item.picHeight + 'rpx;'"
					@tap="menusTap(item.url)" v-if="indexNaN % 2 == 0"></image>
			</view>
			<view class="img_item f_right">
				<image v-for="(item, indexNaN) in pics" :key="indexNaN" lazy-load mode="scaleToFill"
					class="img-waterfall" :src="item.img" :style="'height:' + item.picHeight + 'rpx;'"
					@tap="menusTap(item.url)" v-if="indexNaN % 2 != 0"></image>
			</view>
			<view class="clear"></view>
		</view>
		<image src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/target_d.png" mode="widthFix"
			class="borders-pad tip_images" style="width: 176rpx;"></image>

		<view class=" disp flex-col center ">
			<view class="place_item" v-for="(item,index) in placList" :key="index" @click="cityClick(item)">
				<image :src="item.bgImg" mode="widthFix" class="ful-w"></image>
				<view class="address_icon disp flex-row center">
					<image src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/address_white.png"
						mode="widthFix" class="addres_img"></image>
					<view class="plac_text basic-label fff">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//模版消息
	const arrTemp = ["beforePay", "afterPay", "createBargain", "pink"];
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import utils from '../../utils/util.js'
	import Cache from '@/utils/cache';
	const app = getApp();
	import {
		getTemlIds
	} from '@/api/api.js';
	import {
		getIndexData,
		setCouponReceive,
		getTheme,
		getAppVersion,
		getCityList
	} from '@/api/api.js';
	import { spread } from "@/api/user";
	import {
		goPage
	} from '@/libs/iframe.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: mapGetters(['isLogin']),
		data() {
			return {
				statusBarHeight: statusBarHeight,
				imgUrls: [],
				menus: [],
				cityName: "",
				pics: [{
					img: "https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/pic1.png",
					picHeight: 490
				}, {
					img: "https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/pic2.png",
					picHeight: 336
				}, {
					img: "https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/pic3.png",
					picHeight: 336
				}, {
					img: "https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/pic4.png",
					picHeight: 490,
					url: "/pages/goods/vrList"
				}],
				placList: []
			};
		},
		
		onLoad(options) {
			let self = this
			if (options.scene) { // 仅仅小程序扫码进入
				let qrCodeValue = self.$util.getUrlParams(decodeURIComponent(options.scene));
				let mapeMpQrCodeValue = self.$util.formatMpQrCodeData(qrCodeValue);
				app.globalData.spread = mapeMpQrCodeValue.spread; //将解码后的分销员id保存在globalData中
				if(this.isLogin){
					setTimeout(() => {
						spread(mapeMpQrCodeValue).then(res => {}).catch(res => {})
					}, 2000)
				}
			} else {
				app.globalData.spread = options.spread; //非小程序扫码进入情况下，直接获取url中的分销员id保存在globalDta中
			}
			this.getTemlIds()

			this.getIndexConfig();
			getCityList().then(res=>{
				this.placList=res.data
			})
			let that = this;
			let res = uni.getStorageSync("city");
			if (res) {
				this.cityName = res.city_name
			}else {
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						let url = 'https://apis.map.qq.com/ws/geocoder/v1/?l&get_poi=0';
						uni.request({
							url,
							data: {
								"key": "ATMBZ-JQYKV-ROPPU-U7FXT-3S6MK-2BFWO",
								location: `${res.latitude},${res.longitude}`
							},
							success: ({data}) => {
								let result = data.result
								that.cityName = result.address_component.city;
							}
						})
						
					}
				})
			}
		},

		methods: {
			cityClick(item) {
				uni.navigateTo({
					url: `/pages/goods/goods_list/index?title=${item.name}&city=${item.id}`
				})
			},
			getTemlIds() {
				for (var i in arrTemp) {
					this.getTem(arrTemp[i]);
				}
			},
			getTem(data) {
				getTemlIds({
					type: data
				}).then(res => {
					if (res.data) {
						let arr = res.data.map((item) => {
							return item.tempId
						})
						wx.setStorageSync('tempID' + data, arr);
					}
				});
			},
			
			openLocation() {
				let that = this;
				uni.$on("selectCity", (res)=>{
					uni.setStorageSync("city", res);
					that.cityName = res.city_name
					uni.$off("selectCity")
				})
				uni.navigateTo({
					url: "/pages/students/city/city"
				})
			},
			
			// 首页数据
			getIndexConfig: function() {
				let that = this;
				getIndexData().then(res => {
					let imgHost = res.data.logoUrl.split('crmebimage')[0];
					that.imgHost = imgHost;
					that.$Cache.set('imgHost', imgHost);
					that.$set(that, "imgUrls", res.data.banner);
					that.$set(that, "menus", res.data.menus);
					// 保存商品分类页配置
					Cache.setItem({
						name: 'chatConfig',
						value: {
							consumer_hotline: res.data.consumerHotline,
							telephone_service_switch: res.data.telephoneServiceSwitch
						}
					});
					if (!Cache.has('user_latitude')) {
						this.locationStatus = true;
					}
				});
			},


			menusTap(url) {
				if (url) {
					this.toUrl(url);
				} else {
					this.toUrl("/pages/goods/goods_list/index");
				}
			},
		}

	}
</script>

<style lang="scss" scoped>
	.f_left {
		float: left;
	}

	.f_right {
		float: right;
	}

	.img_item {
		flex-shrink: 0;
		width: 49%;
	}

	.img-waterfall {
		width: 100%;
		margin-bottom: 12rpx;
	}

	.borders-pad {
		padding: 0 26rpx;
	}

	.tip_images {
		width: 144rpx;
		margin: 34rpx 0;
	}

	.nav {
		background: #fff;
		opacity: 1;
		border-radius: 14rpx;
		width: 100%;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 25%;
			margin-top: 30rpx;

			image {
				width: 82rpx;
				height: 82rpx;
			}
		}
	}

	.addres_img {
		width: 32rpx;
		height: 32rpx;
	}

	.page-index {
		width: 100%;

		.mp-header {
			width: 100%;

			.serch-wrapper {
				height: 44px;
				align-items: center;
			}



			.logo {
				position: absolute;
				left: 32rpx;
			}
		}

		.swiper {
			position: relative;
			width: 100%;
			height: 414rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			overflow: hidden;

			swiper,
			.swiper-item,
			image {
				width: 100%;
				height: 414rpx;
				border-radius: 10rpx;
			}
		}
	}

	.place_item {
		width: 91%;
		height: 322rpx;
		position: relative;
		margin-bottom: 32rpx;

		.address_icon {
			position: absolute;
			top: 24rpx;
			left: 24rpx;
		}
	}
</style>